<script setup>
import MyConfirm from "../components/MyConfirm.vue";
import {isNotNull} from "../util";

/**
 * title: 标题
 * column: 列数
 * items:
 *   type:
 *     tag:
 *       label: 标题
 *       value: 内容
 *       width: 标题列宽度，默认 30
 *       span: 内容占位，默认 1
 *       tagType: 标签颜色，默认 "warning"
 *       prefix: 前缀文案
 *       suffix: 后缀文案
 *       format: 前置格式化函数
 *     star:
 *       label: 标题
 *       value: 内容
 *       width: 标题列宽度，默认 30
 *       span: 内容占位，默认 1
 *     card:
 *       label: 标题
 *       value: 内容
 *       width: 标题列宽度，默认 30
 *       span: 内容占位，默认 1
 *       prefix: 前缀文案
 *       suffix: 后缀文案
 *       format: 前置格式化函数
 *     img:
 *       label: 标题
 *       value: 内容
 *       width: 标题列宽度，默认 30
 *       span: 内容占位，默认 1
 *       minio: MINIO地址前缀函数
 *     icon:
 *       label: 标题
 *       value: 内容
 *       width: 标题列宽度，默认 30
 *       span: 内容占位，默认 1
 *       iconType: 图标颜色，默认 "primary"
 *       iconSize: 图标尺寸，默认 "small"
 *     其他:
 *       label: 标题
 *       value: 内容
 *       width: 标题列宽度，默认 30
 *       span: 内容占位，默认 1
 *       prefix: 前缀文案
 *       suffix: 后缀文案
 *       format: 前置格式化函数
 * confirmBtn: 右上角确认按钮
 *   title: 提示文案
 *   fn: 点击确认按钮时触发的函数
 *   label: 确认按钮文案
 */
let parent = defineProps({
  'items': {type: Array, required: true},
  'title': {type: String, required: false, default: '详情信息'},
  'column': {type: Number, required: false, default: 1},
  'confirmBtn': {type: Array, required: false},
});
</script>

<template>
<el-descriptions class="my-list" border label-align="center"
                 :title="title" :column="column">
  <template v-if="confirmBtn" #extra>
    <my-confirm :title="confirmBtn['title']" @confirm="confirmBtn['fn']" :label="confirmBtn['label']"/>
  </template>
  <el-descriptions-item v-for="item in items" :key="item" min-width="100"
                        :label="item['label']"
                        :span="item['span'] || 1">
    <template #default>

      <el-tag v-if="item['type'] === 'tag' && isNotNull(item['value'])"
              :type="item['tagTypeFn'] ? item['tagTypeFn'](item['value']) : item['tagType']">
        <span>{{ item['prefix'] }}</span>
        <span v-if="item['format']">{{ item['format'](item['value']) }}</span>
        <span v-else>{{ item['value'] }}</span>
        <span>{{ item['suffix'] }}</span>
      </el-tag>

      <el-rate v-else-if="item['type'] === 'star' && isNotNull(item['value'])"
               disabled show-score text-color="#ff9900"
               v-model="item['value']" score-template="{value} 分"/>

      <el-card v-else-if="item['type'] === 'card' && isNotNull(item['value'])">
        <span>{{ item['prefix'] }}</span>
        <span v-if="item['format']">{{ item['format'](item['value']) }}</span>
        <span v-else>{{ item['value'] }}</span>
        <span>{{ item['suffix'] }}</span>
      </el-card>

      <!--preview-teleported用于解决图片Z轴遮挡问题-->
      <el-image v-else-if="item['type'] === 'img' && isNotNull(item['value'])"
                fit="fill" preview-teleported
                :src="item['minio'](item['value'])"
                :preview-src-list="[item['minio'](item['value'])]"
                :class="{'large': item['large']}"/>

      <el-button v-else-if="item['type'] === 'icon' && isNotNull(item['value'])" plain
                 :type="item['iconType'] || 'primary'"
                 :size="item['iconSize'] || 'small'"
                 :icon="item['value']">
      </el-button>

      <div v-else>
        <span>{{ item['prefix'] }}</span>
        <span v-if="item['format']">{{ item['format'](item['value']) }}</span>
        <span v-else>{{ item['value'] }}</span>
        <span>{{ item['suffix'] }}</span>
      </div>

    </template>
  </el-descriptions-item>
</el-descriptions>
</template>

<style scoped lang="scss">
.my-list {
  .el-image {
    width: 100px; // 宽度
    height: 100px; // 高度
  }

  .large {
    width: 200px; // 宽度
    height: 100px; // 高度
  }

  .el-card {
    max-height: 420px; // 最大高度（不超过15行）
    --el-card-padding: 10px !important; // 内边距
    white-space: normal !important; // 自动换行
    overflow-y: scroll !important; // 垂直溢出滚动
  }
}


</style>